<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--  引入外部样式,消除页面差距 -->
  <link rel="stylesheet" href="../base.css">
  <!-- 内部样式 -->
  <style>
    /* 让组件居中 */
    .tudou{
      position: relative;left: 0;top: 0;
      margin: 100px auto;width: 450px;height: 250px;
    }
    .tudou img{ width: 100%;height: 100%;}
    /* 盒子覆盖盒子需要用到定位,浮动无法覆盖盒子 */
    /* 所有子类的前边是一个行内元素,没有宽高 */
    /* 子绝父相 */
    .tudou::before{      
      /* 脱离标准流,不占用位置 */
      position: absolute;
      left: 0;top: 0;
      /* 将行内元素,转化成块元素 */
      display: none;
      content:"";      
      width: 450px;height: 250px;background-color: rgba(0, 0, 0, 0.3);
      /* 背景图片 默认是沾满整个屏幕 */
      background-image: url("./arr.png");
      background-repeat: no-repeat;
      /* 设置背景图片的位置 */
      background-position: center;
    }
    /* 悬停状态下,伪元素的样式 */
    .tudou:hover::before{
      display: block;
    }
  </style>
</head>
<body>
<!-- 伪元素可以优化页面的html的结构 -->
  <div class="tudou">
    <img src="tudou.jpg" alt="">
  </div>
</body>
</html>